<!-- 用户详细信息  -->
<template>
    <div class='' v-loading="loading">
        <div class="common-form">基本信息</div>
        <el-descriptions>
            <el-descriptions-item label="用户标识">
                {{ userInfo.userId }}
            </el-descriptions-item>
            <el-descriptions-item label="昵称">
                {{ userInfo.nickName }}
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
                {{ userInfo.realName }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-tag effect="dark" :type="userInfo.gender == 0 ? 'danger' : ''"> {{ userInfo.gender == 0 ? '女' :
                    userInfo.gender == 1 ? '男' : '未知' }} </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                {{ userInfo.mobile }}
            </el-descriptions-item>
            <el-descriptions-item label="用户余额">
                <span v-if="userInfo.userBalance">￥{{ userInfo.userBalance }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="专属客服">
                <!-- <el-select v-model="userInfo.salesPersonId" placeholder="请选择客服" style="width: 200px;" disabled>
                    <el-option v-for="(item, index) in salesData" :key="index" :label="item.personName"
                        :value="item.personId"></el-option>
                </el-select> -->
                <span>{{ userInfo.salesPersonName }}</span>
                <!-- <el-button type="primary" size="small" class="kfItem" @click="handlerClick" round>更换客服</el-button> -->
            </el-descriptions-item>
            <el-descriptions-item label="主营品种">
                {{ userInfo.varirty }}
            </el-descriptions-item>
            <el-descriptions-item label="经营地区"> {{ userInfo.area }}</el-descriptions-item>
            <el-descriptions-item label="种植面积"> {{ userInfo.acreage }}</el-descriptions-item>
            <el-descriptions-item label="注册"> {{ userInfo.createTime }}</el-descriptions-item>
            <el-descriptions-item label="状态">
                <el-tag :type="userInfo.status === 40 ? 'danger' : 'success'">
                    {{ userInfo.statusTxt }}
                </el-tag>
            </el-descriptions-item>
        </el-descriptions>
        <div class="common-form">收货地址信息</div>
        <el-table :data="userAddress" style="width: 100%">
            <el-table-column prop="addressId" label="UID" width="180" />
            <el-table-column prop="name" label="标题"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
            <el-table-column prop="cityName" label="城市" width="180"></el-table-column>
            <el-table-column prop="detail" label="详细地址" width="180"></el-table-column>
        </el-table>
        <el-button style="margin:10px" @click="$router.go(-1)" type="primary">返回上一页</el-button>
        <!-- 更换客服 -->
        <el-dialog v-model="dialogVisible" title="更换客服" width="500" :before-close="handleClose">
            <el-select v-model="selectUser" placeholder="请选择客服" style="width: 100%;">
                <el-option v-for="(item, index) in salesData" :key="index" :label="item.personName" :value="item.personId"></el-option>
            </el-select>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false" icon="Close">关闭</el-button>
                    <el-button type="primary" @click="onChangeSale" icon="Edit">确定更换</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import UserApi from '@/api/user.js'
import SalesApi from '@/api/sales.js'
import { ElMessage } from 'element-plus';
export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            tableData: [],
            dialogVisible: false,
            selectUser: '',
            userInfo: {},
            userAddress: [],
            userData: [],
            loading: false,
            salesData: []
        };
    },
    computed: {},
    watch: {},
    methods: {
        loadDetail(id) {
            this.loading = true
            const $this = this
            if (id) {
                UserApi.getUserDetail(id, true)
                    .then(result => {
                        const { code, data } = result
                        if (code === 1) {
                            $this.userInfo = data
                            $this.userInfo.salesPersonId = data.shopUserId

                            $this.userAddress = data.userAddressList

                        }
                        $this.loading = false
                    }).catch(error => {
                        $this.loading = false
                    })
            }

        },
        handlerClick() {
            this.dialogVisible = true
            console.log(123)
        },
        loadAllSales() {
            const $this = this
            SalesApi.getAllSales()
                .then(result => {
                    const { code, data } = result
                    if (code === 1) {
                        const arrys = []
                        data.forEach(item => {
                            arrys.push({
                                personId: item.shopUserId,
                                personName: item.realName
                            })
                        })
                        $this.salesData = arrys
                    }
                }
                )
        },
        onChangeSale() {
            //shopUserId : 10004 
            const $this = this
            const json = {
                userId: $this.userInfo.userId,
                salesPersonId: $this.selectUser
            }

            console.log('json', json)
            UserApi.changeSales(json.userId, json.salesPersonId)
                .then(result => {
                    const { code, msg } = result
                    if (code === 1) {
                        ElMessage.success(msg)
                        $this.dialogVisible = false
                        $this.loadDetail(json.userId)
                    } else {
                        ElMessage.error(msg)
                    }
                })
        }
    },
    created() {
        const id = this.$route.query.id
        this.loadAllSales()
        this.loadDetail(id)
    },
    mounted() {

    },
}
</script>
<style scoped>
.kfItem {
    margin: 0px 10px;
}
</style>